<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="login" lang="zh_CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Dashboard">
<meta name="keyword"
	content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

<title th:text="${application.get('projectName')}"></title>
<link rel="shortcut icon" th:href="@{/global/myicon.ico}">
<!-- Bootstrap core CSS -->
<link th:href="@{/global/assets/css/bootstrap.css}" rel="stylesheet">
<link th:href="@{/global/dist/css/bootstrapValidator.css}"
	rel="stylesheet">
<!--external css-->
<link th:href="@{/global/assets/font-awesome/css/font-awesome.css}"
	rel="stylesheet" />

<!-- Custom styles for this template -->
<link th:href="@{/global/assets/css/style.css}" rel="stylesheet">
<link th:href="@{/global/assets/css/style-responsive.css}"
	rel="stylesheet">

<!-- js placed at the end of the document so the pages load faster -->
<script src="/global/assets/js/jquery.js"></script>
<script src="/global/assets/js/bootstrap.min.js"></script>
<!-- bootstrap validate js -->
<script type="text/javascript"
	src="/global/dist/js/bootstrapValidator.js"></script>

</head>

<body>
	<div th:if="${resultObj != null}" class="alert alert-warning">
		<a href="#" class="close"
			data-dismiss="alert"> &times; </a><span
			th:text="${resultObj.message}"></span>
	</div>
	<div th:if="${param.error}" class="alert alert-warning">
		<a href="#" class="close"
			data-dismiss="alert"> &times; </a><span
			th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></span><span>,用户名或密码不正确</span>
	</div>

	<!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->

	<div id="login-page">
		<div class="container">
			<form class="form-login" id="loginForm" method="post"
				th:action="@{/login}">
				<h2 class="form-login-heading">现在登录</h2>
				<div class="login-wrap">
					<fieldset>
						<div class="form-group">
							<div>
								<input type="text" class="form-control" name="loginUsername"
									placeholder="用户名" autofocus>
							</div>
						</div>
						<div class="form-group">
							<div>
								<input type="password" name="loginPassword" class="form-control"
									placeholder="密码">
							</div>
						</div>
					</fieldset>
					<label class="checkbox"> <span class="pull-right"> <a
							data-toggle="modal" href="login.html#myModal"> 忘记密码?</a>
					</span>
					</label>
					<button class="btn btn-theme btn-block" type="submit">
						<i class="fa fa-lock"></i> 登录
					</button>
					<hr>

					<div class="registration">
						还没有账户吗?<br /> <a data-toggle="modal" href="login.html#myRegister">
							创建一个帐户 </a>
					</div>
				</div>
			</form>

			<!-- Modal -->
			<form class="form-login" id="forgetForm" th:action="@{/forget}"
				method="post" role="form">
				<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
					tabindex="-1" id="myModal" class="modal fade">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">&times;</button>
								<h4 class="modal-title">忘记密码?</h4>
							</div>
							<div class="modal-body">
								<fieldset>
									<div class="form-group">
										<label class="control-label">输入下面的用户名重新设置密码。</label>
										<div>
											<input type="text" name="userNameForget" placeholder="登录用户名"
												autocomplete="off" class="form-control placeholder-no-fix">
										</div>
									</div>
								</fieldset>
							</div>
							<div class="modal-footer">
								<button data-dismiss="modal" class="btn btn-default"
									type="button">取消</button>
								<button class="btn btn-theme" type="submit">提交</button>
							</div>
						</div>
					</div>
				</div>
			</form>
			<!-- modal -->
			<!-- 注册-->
			<form class="#" action="#" th:action="@{/register}"
				th:object="${user}" method="post" id="registForm" role="form">
				<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
					tabindex="-1" id="myRegister" class="modal fade">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">&times;</button>
								<h4 class="modal-title">注册</h4>
							</div>
							<div class="modal-body">
								<fieldset>
									<div class="form-group">
										<label class="control-label">用户名</label>
										<div>
											<input type="text" th:field="*{loginName}"
												placeholder="登录用户名" autocomplete="off"
												class="form-control placeholder-no-fix">
										</div>
									</div>
									<div class="form-group" style="height: 57.5667">
										<label class="control-label">密码</label>
										<div>
											<input type="password" th:field="*{password}"
												placeholder="密码" autocomplete="off"
												class="form-control placeholder-no-fix">
										</div>
									</div>
									<div class="form-group">
										<label class="control-label">确认密码</label>
										<div>
											<input type="password" name="checkPass" placeholder="确认密码"
												autocomplete="off" class="form-control placeholder-no-fix">
										</div>
									</div>
									<div class="form-group">
										<label class="control-label">电子邮件</label>
										<div>
											<input type="text" th:field="*{email}" placeholder="电子邮件"
												autocomplete="off" class="form-control placeholder-no-fix">
										</div>
									</div>
									<div class="form-group">
										<label class="control-label">手机号</label>
										<div>
											<input type="text" th:field="*{phoneNum}" placeholder="手机号"
												autocomplete="off" class="form-control placeholder-no-fix">
										</div>
									</div>
									<div class="form-group">
										<label class="control-label">昵称</label>
										<div>
											<input type="text" th:field="*{nickName}" placeholder="昵称"
												autocomplete="off" class="form-control placeholder-no-fix">
										</div>
									</div>
								</fieldset>
							</div>
							<div class="modal-footer">
								<button data-dismiss="modal" class="btn btn-default"
									type="button">取消</button>
								<button type="submit" class="btn btn-primary">提交</button>
							</div>
						</div>
					</div>
				</div>
			</form>
			<!-- 注册完成-->
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			//登录验证
			$("#loginForm").bootstrapValidator({
				message : '这个值无效',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					loginUsername : {
						message : '用户名无效',
						validators : {
							notEmpty : {
								message : '用户名是必填，不能为空'
							},
							stringLength : {
								min : 6,
								max : 30,
								message : '用户名必须大于6，长度小于30个字符。'
							},
							regexp : {
								regexp : /^[a-zA-Z0-9_\.]+$/,
								message : '用户名只能由字母、数字、点和下划线组成。'
							}
						}
					},
					loginPassword : {
						validators : {
							notEmpty : {
								message : '密码是必填的，不能为空'
							},
							stringLength : {
								min : 8,
								message : '密码长度不能少于8位'
							}
						}
					}
				}
			});
			//忘记密码验证
			$("#forgetForm").bootstrapValidator({
				message : '这个值无效',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					userNameForget : {
						message : '用户名无效',
						validators : {
							notEmpty : {
								message : '用户名是必填，不能为空'
							},
							stringLength : {
								min : 6,
								max : 30,
								message : '用户名必须大于6，长度小于30个字符。'
							},
							regexp : {
								regexp : /^[a-zA-Z0-9_\.]+$/,
								message : '用户名只能由字母、数字、点和下划线组成。'
							}
						}
					}
				}
			});
			//注册验证
			$('#registForm').bootstrapValidator({
				message : '这个值无效',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					loginName : {
						message : '用户名无效',
						validators : {
							notEmpty : {
								message : '用户名是必填，不能为空'
							},
							stringLength : {
								min : 6,
								max : 30,
								message : '用户名必须大于6，长度小于30个字符。'
							},
							regexp : {
								regexp : /^[a-zA-Z0-9_\.]+$/,
								message : '用户名只能由字母、数字、点和下划线组成。'
							}
						}
					},
					password : {
						validators : {
							notEmpty : {
								message : '密码是必填的，不能为空'
							},
							stringLength : {
								min : 8,
								message : '密码长度不能少于8位'
							},
							identical : {
								field : 'checkPass',
								message : '密码和确认密码不一致。'
							}
						}
					},
					email : {
						validators : {
							notEmpty : {
								message : '电子邮件是必填的，不能为空'
							},
							emailAddress : {
								message : '输入的不是有效的电子邮件'
							}
						}
					},
					phoneNum : {
						validators : {
							digits : {
								message : '该选项只能填写数字'
							},
							regexp : {
								regexp : /^1[3|4|5|8|7][0-9]\d{4,8}$/,
								message : '输入的手机号码不合法'
							}
						}
					},
					checkPass : {
						validators : {
							notEmpty : {
								message : '确认密码是必填的，不能为空'
							},
							identical : {
								field : 'password',
								message : '密码和确认密码不一致。'
							}
						}
					},
					nickName : {
						message : '昵称无效',
						validators : {
							notEmpty : {
								message : '昵称是必填，不能为空'
							}
						}
					}
				}
			});
		});
	</script>
	<!--BACKSTRETCH-->
	<!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
	<script type="text/javascript"
		src="/global/assets/js/jquery.backstretch.min.js"></script>
	<script>
		$.backstretch("/global/assets/img/login-bg.jpg", {
			speed : 500
		});
	</script>


</body>
</html>
